<template>
	<div id="address">
		<div class="">
			<div class="title">
				新增收货地址
			</div>
			<div class="address_form">
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>收货人姓名</span>
					</div>
					<div class="right_input">
						<el-input v-model="params.name" :maxlength="30" placeholder="请填写收货人姓名"></el-input>
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>手机号</span>
					</div>
					<div class="right_input">
						<el-input v-model="params.tel" placeholder="请填写收货人手机号码"></el-input>
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>地址</span>
					</div>
					<div class="right_input">
						<div class="angel_select" @click="selectAddress()">
							<el-input v-model="params.addressPre" placeholder="请选择收货地址"></el-input>
							<img src="../../assets/centers/icon_arrow_spread_mine.png" />
						</div>
						<!--<el-input readonly="readonly" type="text" :value="params.addressPre" placeholder="请选择收货地址"></el-input>-->
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>详细地址</span>
					</div>
					<div class="right_input">
						<el-input type="textarea" v-model="params.addressDetail" :maxlength="30" placeholder="请输入详细地址信息"></el-input>
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">

					</div>
					<div class="right_input">
						<template v-if="editStatus==true">
							<el-checkbox v-model="params.defaultAddress">设为默认收货地址</el-checkbox>
						</template>
						<template v-else>
							<el-checkbox disabled v-model="params.defaultAddress">设为默认收货地址</el-checkbox>
						</template>

					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">

					</div>
					<div class="right_input" @click="submit">
						<div class="infobtn my-flex-center">
							保存
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="title second_title">
			地址管理
		</div>
		<div class="addresslist">
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="name" label="收货人" width="180">
				</el-table-column>
				<el-table-column class="left_addr" label="收货地址" width="300">
					<template slot-scope="scope">
						{{scope.row.addressPre}}
					</template>
				</el-table-column>
				<el-table-column prop="tel" label="手机号">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="success" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<span class="tab_line">|</span>
						<el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>

				</el-table-column>{{radios}}
				<el-table-column class="right_default" label="" prop="defaultAddress">
					<template slot-scope="scope">
						<div class="">
							<el-radio v-model="radios" :label="scope.row.id" @change="setDefault(scope.$index, scope.row)">{{scope.row.defaultAddress?'默认地址':'设为默认地址'}}</el-radio>
						</div>
					</template>

				</el-table-column>
			</el-table>
		</div>

		<!--<mapset :model="mapmodel" ref='mapset' ></mapset>-->
	</div>
</template>

<script>
	import service from '@/js/services/addrservice.js';
	import mapset from '@/components/map/index.vue';
	import bus from '@/js/common/bus.js';
	export default {
		inject: ['reload', 'closeLoading', 'openLoading', 'hasPermission', 'selectAddressShow'],
		components: {
			mapset,
		},
		data() {
			return {
				currrentId: 1,
				checked: false,
				params: {
					name: "", //姓名
					tel: "", //电话号码
					province: "", //省
					city: '', //市
					county: '', //县
					latitude: "", //经度
					longitude: "", //纬度
					addressPre: '', //省市
					addressDetail: "", //详细地址
					defaultAddress: true, //boolean类型,是否是默认地址:true表示是,false表示否
				},
				list_params: {
					pageNum: 1,
					pageSize: 10
				},
				addressInfo: '',
				addrId: '',
				type: '', //标识是购买时没有收货地址，跳转过来加地址的，这样保存时跳转到确认订单页面
				total: 0,
				tableData: [],
				modelData: {},
				mapmodel: {
					visible: false,
					address: null,
					longitude: 0,
					latitude: 0,
					addressPre: '', //省市
					addressDetail: ''
				},
				radios: '',
				editStatus: true
			}
		},
		mounted() {
			if(this.$route.query != '') {
				this.addrId = this.$route.query.id;
				this.type = this.$route.query.type;
			}
			this.getAddressList();
			bus.$on('test', res => {
				this.selectAddressBack(res);
			})

		},
		methods: {
			...service,
			show() {
				console.log(this.$refs.mapset)
			},
			submit() {
				this.handleSave();
			},
			handleEdit(index, row) {
				this.params = this.tool.cloneObj(row);
				this.addrId = row.id;
				if(this.tableData.length == 1) {
					this.editStatus = false;
				} else {
					this.editStatus = true;
				}
			},
			handleDelete(index, row) {
				this.$confirm('您确认要删除该地址吗？')
					.then(_ => {
						this.delAddress(row.id);
					})
					.catch(_ => {});

			},
			setDefault(index, row) {
				console.log(row.id);
				if(this.tableData.length > 0) {
					this.setDefaultAddr(row.id, row.defaultAddress);
				} else {
					this.$message.error('必须要有一个默认地址哦！');
				}

			},
			selectAddress() {
				if(this.params.longitude){
					this.mapmodel.longitude = this.params.longitude;
					this.mapmodel.latitude = this.params.latitude;
					this.mapmodel.address = this.params.addressPre;
					this.selectAddressShow(this.mapmodel);
				}else{
					this.selectAddressShow();
				}
				
			},
			selectAddressBack(model) {
				this.params.addressPre = model.address;
				this.params.latitude = model.latitude;
				this.params.longitude = model.longitude;
			},
		}
	}
</script>

<style lang="less" src="../../less/page/center/address.less"></style>